<template>
	<div class="llf_content">
		<SearchHeader @search="onSearch" :selectform="selectform" placeholder="工号,姓名搜索">
			<template v-slot:rightBtn>
				<MyButton class="primary" title="新增人员" @click="TableOperation('add')" />
			</template>
		</SearchHeader>
		<depList :tableData="dataSource" @operation="TableOperation" />
		<MyPagination :total="total" @change="onPaginationChange" ref="pageRef" />
		<MyDialog v-model:visible="createVisible" :title="currentInfo?.id ? '编辑人员' : '新增人员'" :width="500"
			destroyOnClose>
			<template v-slot:content>
				<crateDlg :currentInfo="currentInfo" @onReset="createVisible = false" @onSubmit="onSubmit" />
			</template>
		</MyDialog>
	</div>
</template>

<script lang="ts" setup>
	import { onMounted, ref, watch, computed } from "vue";
	import { Modal } from 'ant-design-vue';
	import { useOrganization } from "@/store";
	import { findpeopList, onlyAdmin } from "@/api/orang";
	import debounce from "@/utils/debounce";
	import options from "@/common";
	import message from "@/utils/message";
	import depList from "./component/depList.vue";
	import crateDlg from "./component/cratePeople.vue";
	
	const selectform = ref<any>([
		{ title: '归属部门', childer:[], width: '50px', contWidth: '150px',class: 'departmentId', },
		{ title: '性别', childer:options.SEX_OPTIONS, width: '50px', contWidth: '150px',class: 'sex', },
		// { title: '职称', childer:[], width: '50px', contWidth: '150px',class: 'status', },
	]);
	const dataSource = ref([{name:'s',id:1}]);
	const total = ref(0);
	const searchData = ref({ page:1,size:20 });
	const createVisible = ref(false);
	const currentInfo = ref({});
	const pageRef = ref();
	
	const OrganStore = useOrganization();
	OrganStore.getDepNodeList();
	const departSelectList = computed(()=> OrganStore.$state.departSelectList);
	
	async function getFn(){
		const res = await findpeopList({ queryParam:searchData.value });
		if(!res) return;
		dataSource.value = res.list;
		total.value = res.total;
	}
	
	const onSearch = (inputValue: string, obj: any) => {	//搜索---子组件
		let SEARCH_VALUE = {};
		SEARCH_VALUE = obj;
		SEARCH_VALUE["keyword"] = inputValue;
		// console.log(SEARCH_VALUE, "SEARCH_VALUE")
		searchData.value.page = 1;
		pageRef.value.changeCurrent();
		searchData.value = { ...searchData.value, ...SEARCH_VALUE };
		getFn();
	};
	
	const onPaginationChange = (value: { page: number; pageSize: number }) => { // 页码与页面数量
		const { pageSize, page } = value;
		searchData.value = { ...searchData.value, page, limit: pageSize };
		getFn();
	};

	const TableOperation = async (index: string, row: any = {}) => { // 表格操作
		switch(index){
			case 'edit':{
				const res = await onlyAdmin(row.id);
				if(!res) return;
				currentInfo.value = res;
				createVisible.value = true;
			};break;
			case 'add':{
				currentInfo.value = {};
				createVisible.value = true;
			};break;
			case 'delete':{
				Modal.confirm({
				    content: `您确定要永久删除吗？`,
				    onOk() {
				       console.log(2);
				    },
				    // eslint-disable-next-line @typescript-eslint/no-empty-function
				    onCancel() {},
				});
			};break;
			default:console.log(1);
		}
	};
	
	const onSubmit = debounce(()=>{
		createVisible.value = false;
		OrganStore.getDoctorList(true);
		getFn();
	}, 50);
	
	watch(()=>departSelectList.value,()=>{
		// console.log(departSelectList.value)
		selectform.value[0].childer = departSelectList.value;
	},{ immediate:true });
	
	onMounted(()=>{
		getFn();
	});
</script>

<style>
</style>